<!DOCTYPE html>
<html>
<head>
    <title>模板</title>
    <!--<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">-->
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/all.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/OverlayScrollbars.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../../statics/plugins/layui2.5.6/css/layui.css">
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
    <script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
    <script src="${request.contextPath}/statics/libs/vue.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${request.contextPath}/statics/js/common.js"></script>
    <script src="../../statics/plugins/layui2.5.6/layui.js"></script>

</head>
<body>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box bg-info">
                    <div class="inner" style="text-align: center;">
                        <h3 >昨日平均车位占用率：<span id="yes">0</span>%</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="yess">0</span>%</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="yesn">0</span>%</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-model-s" style="font-size: 60px;"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3 >今日平均车位占用率：<span id="today">0</span>%</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="todays">0</span>%</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="todayn">0</span>%</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-model-s" style="font-size: 60px;"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box bg-warning">
                    <div class="inner" style="text-align: center;color: white;">
                        <h3>本月平均车位占用率：<span id="month">0</span>%</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="months">0</span>%</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="monthn">0</span>%</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-model-s" style="font-size: 60px;"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <!--<div class="col-lg-3 col-6">
                &lt;!&ndash; small box &ndash;&gt;
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3>大车位剩余数：<span>0</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span>0</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span>0</span></h4>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                </div>
            </div>
            &lt;!&ndash; ./col &ndash;&gt;
            <div class="col-lg-3 col-6">
                &lt;!&ndash; small box &ndash;&gt;
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3>大车位占用率：<span>0%</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span>0%</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span>0%</span></h4>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                </div>
            </div>
            &lt;!&ndash; ./col &ndash;&gt;
            <div class="col-lg-3 col-6">
                &lt;!&ndash; small box &ndash;&gt;
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3>小车位剩余数：<span>0</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span>0</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span>0</span></h4>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                </div>
            </div>
            &lt;!&ndash; ./col &ndash;&gt;
            <div class="col-lg-3 col-6">
                &lt;!&ndash; small box &ndash;&gt;
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3>小车位占用率：<span>0%</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span>0%</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span>0%</span></h4>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                </div>
            </div>
            &lt;!&ndash; ./col &ndash;&gt;-->

        </div>
        <!-- /.row -->
        <div class="row" style="height: 50px;">
            <div class="card-tools">
                <button type="button" class="btn btn-primary" onclick="showChart(0)">近七天</button>
                <button type="button" class="btn btn-primary" onclick="showChart(1)">近三十天</button>
                自定义时间:
                <button type="button" class="btn btn-success" style="padding: 0;border: none;background-color:none ;"><input id="beginTime" type="text"placeholder="开始时间"/></button>
                ——<button type="button" class="btn btn-success" style="padding: 0;border: none;background-color: none;"><input id="endTime" type="text"placeholder="结束时间"/></button>
                <button type="button" class="btn btn-success" onclick="showChart(2)">查询</button>

            </div>
        </div>

        <div class="row" style="height: 340px;">
            <div class="col-md-9" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">车位占用率统计</h4>

                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;"id="zhanyonglv">


                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <div class="col-md-3" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">实时视频</h4>

                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">


                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <div class="row" style="height: 700px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">南区车位</h4>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;padding: 0;background-color: #0f6ab4">
                        <div class="row" style="height: 100%;margin: 0;">
                            <div class="col-md-12" style="height: 100%;padding: 0;">
                                <div style="width:100%;height: 100%;display: inline-block;float: left;position: relative">
                                    <img src="../../statics/css/img/southParking.png" style="height: 100%;width:80%;float: left">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="3e4b129c7a86433da835373cd9180f2e" onclick="startPreview3('3e4b129c7a86433da835373cd9180f2e')" style="position: absolute;top: 7%;left: 19%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="74212b4d0e7740d88177be64807c1f71" onclick="startPreview3('74212b4d0e7740d88177be64807c1f71')" style="position: absolute;top: 7%;left: 22%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="298745c440b14d378c0344ba0f131768" onclick="startPreview3('298745c440b14d378c0344ba0f131768')" style="position: absolute;top: 7%;left: 55%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="86f49056137c4d599af1b029cf9bab5b" onclick="startPreview3('86f49056137c4d599af1b029cf9bab5b')" style="position: absolute;top: 7%;left: 58%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="7ae8223339244d7c96388e702e6abef5" onclick="startPreview3('7ae8223339244d7c96388e702e6abef5')" style="position: absolute;top: 11%;left: 19%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="a9f05df626014230aad96cb44a51d87e" onclick="startPreview3('a9f05df626014230aad96cb44a51d87e')" style="position: absolute;top: 11%;left: 22%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="eee6054c75574dee97faa353841fa27b" onclick="startPreview3('f833329f921641f993fdb905e55cba45')" style="position: absolute;top: 11%;left: 55%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="c9b00b12c85144eab7b22f7c53920980" onclick="startPreview3('c9b00b12c85144eab7b22f7c53920980')" style="position: absolute;top: 11%;left: 58%;width: 3%;cursor: pointer">


                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="a94c277c5e5246db9037af20de4ca184" onclick="startPreview3('a94c277c5e5246db9037af20de4ca184')" style="position: absolute;top: 52%;left: 18%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="e30c9bc3682e43dfb61af1ef21faa7cb" onclick="startPreview3('e30c9bc3682e43dfb61af1ef21faa7cb')" style="position: absolute;top: 52%;left: 21%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="a116c570262e4c1c98f52b5218b4eb31" onclick="startPreview3('a116c570262e4c1c98f52b5218b4eb31')" style="position: absolute;top: 52%;left: 56%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="8c626afee50a41f1834d16bf8983ca09" onclick="startPreview3('8c626afee50a41f1834d16bf8983ca09')" style="position: absolute;top: 52%;left: 59%;width: 3%;cursor: pointer">


                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="bbe5cb708ad7418c9e6aec3644b7c492" onclick="startPreview3('bbe5cb708ad7418c9e6aec3644b7c492')" style="position: absolute;top: 59%;left: 18%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="2ddc0c4135d44522898126cacd7dcbf9" onclick="startPreview3('2ddc0c4135d44522898126cacd7dcbf9')" style="position: absolute;top: 59%;left: 21%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="35177b770b5444cb9b0ff0ebc2dd008e" onclick="startPreview3('35177b770b5444cb9b0ff0ebc2dd008e')" style="position: absolute;top: 59%;left: 56%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="65849f4e6cb14f03bb78000c244a47d9" onclick="startPreview3('65849f4e6cb14f03bb78000c244a47d9')" style="position: absolute;top: 59%;left: 59%;width: 3%;cursor: pointer">


                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="c555f08416c24c64a668e1d1ad6ea568" onclick="startPreview3('c555f08416c24c64a668e1d1ad6ea568')" style="position: absolute;top: 65.5%;left: 18%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="6a796cc69a7a421b88238482a4add3b1" onclick="startPreview3('6a796cc69a7a421b88238482a4add3b1')" style="position: absolute;top: 65.5%;left: 21%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="5cbfa39a28cd45eda1d3824c93d79ba3" onclick="startPreview3('5cbfa39a28cd45eda1d3824c93d79ba3')" style="position: absolute;top: 65.5%;left: 56%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="8f64034c49f9418c954114ef07c361ab" onclick="startPreview3('8f64034c49f9418c954114ef07c361ab')" style="position: absolute;top: 65.5%;left: 59%;width: 3%;cursor: pointer">

                                    <!--   <img src="../statics/css/img/camera-left.png" id="" onclick="startPreview3('')" style="position: absolute;top: 71%;left: 75%;width: 3%;cursor: pointer">-->

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="fb88b027e45847dd940009158c299f78" onclick="startPreview3('fb88b027e45847dd940009158c299f78')" style="position: absolute;top: 69%;left: 18%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="a5b9abf14e204b3e92c81e130bcd911e" onclick="startPreview3('a5b9abf14e204b3e92c81e130bcd911e')" style="position: absolute;top: 69%;left: 21%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="c9a2abdd92c84c6a9f83836fe1927ff2" onclick="startPreview3('c9a2abdd92c84c6a9f83836fe1927ff2')" style="position: absolute;top: 69%;left: 56%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="9117955f258042c18741189834b77788" onclick="startPreview3('9117955f258042c18741189834b77788')" style="position: absolute;top: 69%;left: 59%;width: 3%;cursor: pointer">


                                    <!--   <img src="../statics/css/img/camera-left.png" id="" onclick="startPreview3('')" style="position: absolute;top: 71%;left: 75%;width: 3%;cursor: pointer">-->

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="c7c8c659ba8b4534a7947f2d3977813c" onclick="startPreview3('c7c8c659ba8b4534a7947f2d3977813c')" style="position: absolute;top: 75.5%;left: 20.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="3de785312bc44b7aba2cc66d93f554d1" onclick="startPreview3('3de785312bc44b7aba2cc66d93f554d1')" style="position: absolute;top: 75.5%;left: 23.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="b8f01123f90441768691dc71884f66f2" onclick="startPreview3('b8f01123f90441768691dc71884f66f2')" style="position: absolute;top: 85%;left: 44%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="d96143e9b57e469885ddc80608eb4386" onclick="startPreview3('d96143e9b57e469885ddc80608eb4386')" style="position: absolute;top: 85%;left: 47%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="6694223b2dc44f808e9782ce61ce9f53" onclick="startPreview3('6694223b2dc44f808e9782ce61ce9f53')" style="position: absolute;top: 80%;left: 59%;width: 3%;cursor: pointer">


                                    <div style="width:19%;height:90%;margin-left: 5px;display: inline-block;color: red;text-align: center;font-size: 19px;position: relative">
                                        <div style="top: 16% !important; position: absolute">后广场货车区:<span id="bts" style="color:springgreen;">000</span></div>
                                        <div style="top: 59% !important; position: absolute">小车区:<span id="fcs" style="color: springgreen;">000</span></div>
                                        <div style="top: 78% !important; position: absolute">前广场大车区:<span id="fbs" style="color: springgreen;">000</span></div>
                                        <div style="top: 95% !important; position: absolute">超长货车区:<span id="ls" style="color: springgreen;">000</span></div>

                                    </div>
                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">北区车位</h4>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;padding: 0;background-color: #0f6ab4;">
                        <div class="row" style="height: 100%;margin: 0;">
                            <div class="col-md-12" style="height: 100%;padding: 0;">
                                <div style="width:100%;height: 100%;display: inline-block;float: left;position: relative">
                                    <img src="../../statics/css/img/northParking.png" style="height: 100%;width: 80%;float: left">

                                    <img src="../../../statics/css/img/camera-left.png" name="camera-left" id="38ea472a4cd14f6b992f172131746cfd" onclick="startPreview3('38ea472a4cd14f6b992f172131746cfd')" style="position: absolute;top: 4.6%;left: 33%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="223288ac348f49daa8ef61d4e41a167a" onclick="startPreview3('223288ac348f49daa8ef61d4e41a167a')" style="position: absolute;top: 4.6%;left: 36%;width: 3%;cursor: pointer">
                                    <img src="../../../statics/css/img/camera-left.png" name="camera-left" id="43393c6b0dea44019ee83506ed159f9f" onclick="startPreview3('43393c6b0dea44019ee83506ed159f9f')" style="position: absolute;top: 8.5%;left: 33%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="386927ccf9b247a49717d39e92d59ef6" onclick="startPreview3('386927ccf9b247a49717d39e92d59ef6')" style="position: absolute;top: 8.5%;left: 36%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="06a80f6e23ce4622ad54007476f87707" onclick="startPreview3('06a80f6e23ce4622ad54007476f87707')" style="position: absolute;top: 50%;left: 18.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="678a9fae7795475fb2b6fcd874271e0f" onclick="startPreview3('678a9fae7795475fb2b6fcd874271e0f')" style="position: absolute;top: 50%;left: 21.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="e6099d19c62849e8b776925567fadca2" onclick="startPreview3('e6099d19c62849e8b776925567fadca2')" style="position: absolute;top: 50%;left: 53%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="76dd51da3dd34499a953a8a8c1868bd3" onclick="startPreview3('76dd51da3dd34499a953a8a8c1868bd3')" style="position: absolute;top: 50%;left: 56%;width: 3%;cursor: pointer">


                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="a7657bce762c4a9db9d407e46f508e54" onclick="startPreview3('a7657bce762c4a9db9d407e46f508e54')" style="position: absolute;top: 55%;left: 18.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="b2a57e80f5194313b2b0592598416aef" onclick="startPreview3('b2a57e80f5194313b2b0592598416aef')" style="position: absolute;top: 55%;left: 21.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="dc5359b7efbc44e48f9106072552fcb0" onclick="startPreview3('dc5359b7efbc44e48f9106072552fcb0')" style="position: absolute;top: 55%;left: 53%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="38298b347ddc481f98b8e167a0c4e994" onclick="startPreview3('38298b347ddc481f98b8e167a0c4e994')" style="position: absolute;top: 55%;left: 56%;width: 3%;cursor: pointer">


                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="259471b07073422a9911979f30cbe509" onclick="startPreview3('259471b07073422a9911979f30cbe509')" style="position: absolute;top: 66%;left: 18.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="498a22f34d7f4ae3bf32f923910dfcf6" onclick="startPreview3('498a22f34d7f4ae3bf32f923910dfcf6')" style="position: absolute;top: 66%;left: 21.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="1b1d30ba938e494ba4cb4b6548eaba86" onclick="startPreview3('1b1d30ba938e494ba4cb4b6548eaba86')" style="position: absolute;top: 66%;left: 53%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="e24d39ce5f7b4c4f8218f84d292c57b2" onclick="startPreview3('e24d39ce5f7b4c4f8218f84d292c57b2')" style="position: absolute;top: 66%;left: 56%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="952db4c60ebb422cb05dea3121451d5a" onclick="startPreview3('952db4c60ebb422cb05dea3121451d5a')" style="position: absolute;top: 70%;left: 18.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="ccbc4761a1e94a758057bb7af1318ca3" onclick="startPreview3('ccbc4761a1e94a758057bb7af1318ca3')" style="position: absolute;top: 70%;left: 21.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="4f1420a0f88542a5810d66008cb26374" onclick="startPreview3('4f1420a0f88542a5810d66008cb26374')" style="position: absolute;top: 70%;left: 53%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="56cfaf7f8dd0499d854fb48ed69cee0f" onclick="startPreview3('56cfaf7f8dd0499d854fb48ed69cee0f')" style="position: absolute;top: 70%;left: 56%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="5083da3aba104a8687cb0ab60e0fa484" onclick="startPreview3('5083da3aba104a8687cb0ab60e0fa484')" style="position: absolute;top: 79.5%;left: 18.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="adb286f0077041e8a99ab4bee03cbc11" onclick="startPreview3('adb286f0077041e8a99ab4bee03cbc11')" style="position: absolute;top: 79.5%;left: 21.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="3dd44cf31f0e4c4496cae23e73a0f963" onclick="startPreview3('3dd44cf31f0e4c4496cae23e73a0f963')" style="position: absolute;top: 79.5%;left: 53%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="6293a9e6b4e84425952450f689368206" onclick="startPreview3('6293a9e6b4e84425952450f689368206')" style="position: absolute;top: 79.5%;left: 56%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="19df9445a17544bb93d0c401f4c960df" onclick="startPreview3('19df9445a17544bb93d0c401f4c960df')" style="position: absolute;top: 83%;left: 18.5%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="fef98775f1ac46f89d80829b066fab66" onclick="startPreview3('fef98775f1ac46f89d80829b066fab66')" style="position: absolute;top: 83%;left: 21.5%;width: 3%;cursor: pointer">

                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="dd427edae97d423d927f6e619e8a7ada" onclick="startPreview3('dd427edae97d423d927f6e619e8a7ada')" style="position: absolute;top: 83%;left: 53%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="0a18867e6ccb45e891772c578b601b65" onclick="startPreview3('0a18867e6ccb45e891772c578b601b65')" style="position: absolute;top: 83%;left: 56%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-left.png" name="camera-left" id="7314fbc5addc4aad9e69cd006edafecc" onclick="startPreview3('7314fbc5addc4aad9e69cd006edafecc')" style="position: absolute;top: 94%;left: 46%;width: 3%;cursor: pointer">
                                    <img src="../../statics/css/img/camera-right.png" name="camera-right" id="5ce14c99e69343edb087108213d1d77c" onclick="startPreview3('5ce14c99e69343edb087108213d1d77c')" style="position: absolute;top: 94%;left: 49%;width: 3%;cursor: pointer">


                                    <div style="width:19%;height: 90%;margin-left: 5px;display: inline-block;float: left;color: red;text-align: center;font-size: 19px;position: relative">
                                        <div style="top: 16% !important; position: absolute">后广场货车区:<span id="btn" style="color: springgreen;">000</span></div>
                                        <div style="top: 59% !important; position: absolute">小车区:<span id="fcn" style="color: springgreen;">000</span></div>
                                        <div style="top: 76% !important; position: absolute">前广场客车区:<span id="fbn" style="color: springgreen;">000</span></div>
                                        <div style="top: 90% !important; position: absolute">前广场货车区:<span id="ftn" style="color: springgreen;">000</span></div>
                                        <div style="top: 104% !important; position: absolute">超长货车区:<span id="ln" style="color: springgreen;">000</span></div>

                                    </div>
                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->

    </div>
</section>

</body>
<script src="../../statics/js/indexs/echarts-all.js"></script>
<script src="../../statics/js/indexs/hikvision3.js"></script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#beginTime'
            ,type: 'date'
        });
        laydate.render({
            elem: '#endTime'
            ,type: 'date'
        });
    });
</script>
<script>
    $(function(){
        showChart(0);
        queryParkingz();
        zhanyonglv();
    });
    function showChart(type){
        var startTime=$("#beginTime").val();
        var endTime = $("#endTime").val();
        if(type==2){
            if(!startTime){
                alert("请选择开始时间！")
                return;
            }else{
                startTime = startTime+" 00:00:00";
            }
            if(!endTime){
                alert("请选择结束时间！")
                return;
            }else{
                endTime = endTime+" 23:59:59";
            }
        }
        var avg=[];
        $.get( "../../cw/cwparkingspace/cwchart?type="+type+"&startTime="+startTime+"&endTime="+endTime,function(r){
            var soulist=r.southlist;
            var norlist=r.northlist;
            for (var i = 0; i <soulist[1].length ; i++) {
                avg.push(((parseFloat(soulist[1][i])+parseFloat(norlist[1][i]))/2).toFixed(1))
            }
            var myChart = echarts.init($("#zhanyonglv")[0]);
            option = {
                tooltip : {
                    trigger: 'axis',
                    formatter: function(params) { //自定义函数修改折线图给数据加单位
                        var str = '';//声明一个变量用来存储数据
                        str += '<div>'+ params[0].name +'</div>'; //显示首行的函数
                        for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                            str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'+ params[i].seriesName +'</span> : <span>'+ params[i].data+'%' +'</br>';
                        }
                        return str;
                    }
                },
                grid: {
                    x: 46,
                    y:30,
                    x2:30,
                    y2:20,
                    borderWidth: 0
                },

                calculable : false,
                legend: {
                    data:['南区','北区','平均值',],
                    textStyle:{
                        color:"#000"

                    }
                },
                xAxis : [
                    {
                        type : 'category',
                        name:"日期",
                        data : soulist[0],
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab',
                                align: 'center'
                            }
                        }

                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name : '占用率',
                        max : 100 ,
                        axisLabel : {
                            formatter: '{value} %',
                            textStyle: {
                                color: '#a4a7ab',
                            }
                        },
                        splitLine: {
                            show: false
                        },
                    }
                ],
                series : [

                    {
                        name:'南区',
                        type:'bar',
                        data:soulist[1],
                        itemStyle: {
                            normal: {
                                color:"#0ad5ff"
                            }
                        }
                    },
                    {
                        name:'北区',
                        type:'bar',
                        data:norlist[1],
                        itemStyle: {
                            normal: {
                                color:"#005ea1"
                            }
                        }
                    },
                    {
                        name:'平均值',
                        type:'line',
                        data:avg,
                        itemStyle: {
                            normal: {
                                color:"#1afffd"
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        })
    }
    //查询剩余车位
    function queryParkingz(){
        $.get(baseURL + "cw/cwparkingspace/spaceShow", function(r){
            $("#ln").html(r.p1);
            $("#ftn").html(r.p2);
            $("#fbn").html(r.p3);
            $("#btn").html(r.p4);
            $("#fcn").html(r.p5);
            $("#ls").html(r.p6);
            $("#fbs").html(r.p7);
            $("#bts").html(r.p9);
            $("#fcs").html(r.p10);

        });

    }
    function zhanyonglv(){
        $.get( "../../cw/cwparkingspace/cwchart?type=3&startTime=1&endTime=2",function(r){
            $("#yes").html(r.yesss);
            $("#yess").html(r.yess);
            $("#yesn").html(r.yesn);
            $("#today").html(r.today);
            $("#todays").html(r.todays);
            $("#todayn").html(r.todayn);
            $("#month").html(r.monthss);
            $("#months").html(r.monthsss);
            $("#monthn").html(r.monthssn);

        });
    }

    function startPreview3(cameraIndexCode){
        var name =$(".camera-run").attr("name");
        if(name=="camera-left"){
            $(".camera-run").attr("src","../../statics/css/img/camera-left.png");
            $(".camera-run").removeClass("camera-run");
        }else {
            $(".camera-run").attr("src","../../statics/css/img/camera-right.png");
            $(".camera-run").removeClass("camera-run");
        }
        var name1 =$("#"+cameraIndexCode).attr("name");

        if(name1=="camera-left"){
            $("#"+cameraIndexCode).attr("src","../../statics/css/img/camera-left1.png");
            $("#"+cameraIndexCode).addClass("camera-run");
        }else {
            $("#"+cameraIndexCode).attr("src","../../statics/css/img/camera-right1.png");
            $("#"+cameraIndexCode).addClass("camera-run");
        }
        window.parent.startPreview(cameraIndexCode);
    }

</script>
<script>
    var scro=0;
    $(document).scroll(function() {
        var scroH = $(document).scrollTop();
        var pWindow= window.parent;
        var pDiv=pWindow.document.getElementById('playWnd');
        var top = $(pDiv).css("top");
        top = top.substring(0,top.length-2);
        var hei = top-scroH+scro;
        scro = scroH;
        $(pDiv).css("top",hei+"px");

        var width=$(pDiv).width();
        var height=$(pDiv).height();
        window.parent.oWebControl.JS_Resize(width, height);
        window.parent.setWndCover();
    });


</script>
</html>
<script src="${request.contextPath}/statics/plugins/adminLTE/js/adminlte.min.js"></script>